<template>
  <div>
  <h1>日历组件</h1>
    <a-row class="calendarContent" style="margin: 0 auto; width: 100%">
      <div class="calendarBox">
        <a-calendar :value="value" @panelChange="panelChange" @select="selectDate">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="item in getListData(value)" :key="item.date">
              <a-tooltip
                v-if="item.date<nowDate || item.date == nowDate"
              >
                <template slot="title">
                  <span>只能在下个交易日才可设置</span>
                </template>
                <div class="cellBlockOld" v-if="item.date < nowDate">
                  <span v-if="item.workFlag=='0'">交易日</span>
                  <span v-if="item.workFlag=='1' && item.date !=next">非交易日</span>
                </div>
                <div class="cellBlockNow" v-if="item.date == nowDate">
                  <span v-if="item.workFlag=='0' && item.date == nowDate">交易日</span>
                  <span v-if="item.workFlag=='1' && item.date == nowDate">非交易日</span>
                </div>
              </a-tooltip>
              <a-popconfirm
                v-if="item.workFlag == '1' && item.date>nowDate"
                title="设为交易日"
                @confirm="setDate(0)"
                @cancel="cancel"
              >
                <div class="cellBlockNext1">
                <span v-if="item.workFlag== '1'">非交易日
                </span>
                </div>
              </a-popconfirm>

              <a-popconfirm
                v-if="item.workFlag == '0' && item.date>nowDate"
                title="设为非交易日"
                @confirm="setDate(1)"
                @cancel="cancel"
              >
                <div class="cellBlockNext0">
                  <span v-if="item.workFlag== '0' && item.date != next">交易日</span>
                  <span v-if="item.workFlag== '0' && item.date == next">下一交易日
                </span>
                </div>
              </a-popconfirm>
            </li>
          </ul>
        </a-calendar>
      </div>
    </a-row>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: '',
  components: {

  },
  watch: {},
  data () {
    return {
      value: moment(new Date()),
      dataList: [
        {
          date: '20210228',
          workFlag: '1'
        },
        {
          date: '20210301',
          workFlag: '0'
        },
        {
          date: '20210302',
          workFlag: '0'
        },
        {
          date: '20210303',
          workFlag: '0'
        },
        {
          date: '20210304',
          workFlag: '0'
        },
        {
          date: '20210305',
          workFlag: '0'
        },
        {
          date: '20210306',
          workFlag: '1'
        },
        {
          date: '20210307',
          workFlag: '1'
        },
        {
          date: '20210308',
          workFlag: '0'
        },
        {
          date: '20210309',
          workFlag: '0'
        },
        {
          date: '20210310',
          workFlag: '0'
        },
        {
          date: '20210311',
          workFlag: '0'
        },
        {
          date: '20210312',
          workFlag: '0'
        },
        {
          date: '20210313',
          workFlag: '1'
        },
        {
          date: '20210314',
          workFlag: '1'
        },
        {
          date: '20210315',
          workFlag: '0'
        },
        {
          date: '20210316',
          workFlag: '0'
        },
        {
          date: '20210317',
          workFlag: '0'
        },
        {
          date: '20210318',
          workFlag: '0'
        },
        {
          date: '20210319',
          workFlag: '0'
        },
        {
          date: '20210320',
          workFlag: '1'
        },
        {
          date: '20210321',
          workFlag: '1'
        },
        {
          date: '20210322',
          workFlag: '0'
        },
        {
          date: '20210323',
          workFlag: '0'
        },
        {
          date: '20210324',
          workFlag: '0'
        },
        {
          date: '20210325',
          workFlag: '0'
        },
        {
          date: '20210326',
          workFlag: '0'
        },
        {
          date: '20210327',
          workFlag: '1'
        },
        {
          date: '20210328',
          workFlag: '1'
        },
        {
          date: '20210329',
          workFlag: '0'
        },
        {
          date: '20210330',
          workFlag: '0'
        },
        {
          date: '20210331',
          workFlag: '0'
        },
        {
          date: '20210401',
          workFlag: '0'
        },
        {
          date: '20210402',
          workFlag: '0'
        },
        {
          date: '20210403',
          workFlag: '1'
        },
        {
          date: '20210404',
          workFlag: '1'
        },
        {
          date: '20210405',
          workFlag: '0'
        },
        {
          date: '20210406',
          workFlag: '0'
        },
        {
          date: '20210407',
          workFlag: '0'
        },
        {
          date: '20210408',
          workFlag: '0'
        },
        {
          date: '20210409',
          workFlag: '0'
        },
        {
          date: '20210410',
          workFlag: '1'
        },
        {
          date: '20210411',
          workFlag: '1'
        },
        {
          date: '20210412',
          workFlag: '0'
        },
        {
          date: '20210413',
          workFlag: '1'
        },
        {
          date: '20210414',
          workFlag: '1'
        },
        {
          date: '20210415',
          workFlag: '0'
        },
        {
          date: '20210416',
          workFlag: '0'
        },
        {
          date: '20210417',
          workFlag: '0'
        },
        {
          date: '20210418',
          workFlag: '0'
        },
        {
          date: '20210419',
          workFlag: '0'
        },
        {
          date: '20210420',
          workFlag: '1'
        },
        {
          date: '20210421',
          workFlag: '1'
        },
        {
          date: '20210422',
          workFlag: '0'
        },
        {
          date: '20210423',
          workFlag: '0'
        },
        {
          date: '20210424',
          workFlag: '0'
        },
        {
          date: '20210425',
          workFlag: '0'
        },
        {
          date: '20210426',
          workFlag: '0'
        },
        {
          date: '20210427',
          workFlag: '1'
        },
        {
          date: '20210428',
          workFlag: '1'
        },
        {
          date: '20210429',
          workFlag: '0'
        },
        {
          date: '20210430',
          workFlag: '0'
        }
      ],
      now: new Date(),
      selectDateValue: ''
    }
  },
  methods: {
    moment,
    panelChange (value) {
      console.log('面板中点击、切换事件')
      console.log(value)
      this.value = value
    },
    selectDate (value) {
      console.log('选中日期事件')
      console.log(value)
      this.selectDateValue = value.format('YYYYMMDD')
    },
    setDate (val) {
      console.log(val)
      var newDataList = []
      this.dataList.forEach(e => {
        if (e.date === this.selectDateValue) {
          e.workFlag = val
          newDataList.push(e)
        } else {
          newDataList.push(e)
        }
      })
      this.dataList = newDataList
      console.log(this.dataList)
      // return newDataList
    },
    cancel () {

    },
    getListData (value) {
      var listData = []
      this.dataList.forEach(e => {
        // 让数组与日历日期匹配
        if (e.date === value.format('YYYYMMDD')) {
          listData.push(e)
        }
      })
      return listData
    }
  },
  computed: {
    nowDate: function () {
      const nowDate = moment(this.now).format('YYYYMMDD')
      return nowDate
    },
    next: function () {
      var next
      var nextDate = new Date(this.now - 0 + 86400000)
      next = moment(nextDate).format('YYYYMMDD')
      return next
    }
  },
  created () {
  },
  mounted () {
  }
}
</script>

<style scoped lang="less">
.calendarContent {
  .calendarBox {
    .events {
      padding: 0;
    }
    li {
      list-style: none;
    }
    span {
      font-size: 14px;
      line-height: 70px;
      vertical-align: middle;
    }
    .cellBlockOld {
      width: 100%;
      height: 70px;
      background-color: #eeeeee;
      text-align: center;
    }
    .cellBlockNow {
      width: 100%;
      height: 70px;
      background-color: #495aff;
      text-align: center;
    }
    .cellBlockNext0 {
      width: 100%;
      height: 70px;
      border: 1px solid #cccccc;
      background-color: #d4e6f7;
      text-align: center;
    }
    .cellBlockNext1 {
      width: 100%;
      height: 70px;
      border: 1px solid #cccccc;
      background-color: #ffffff;
      text-align: center;
    }
  }
}
</style>
